<template>
	<div class="page">
		<div class="top">
			<el-table :cell-style="cellStyle" :header-cell-class-name="cellHeadStyle"
				:data="dataList" size="small" v-loading="loading" height="300px">
				<el-table-column prop="vars.title" min-width="180px" show-overflow-tooltip label="标题">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" @click="detail(scope.row)">{{scope.row.vars.title}}</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="processDefinitionName" show-overflow-tooltip label="名称">
				</el-table-column>
				<el-table-column prop="status" show-overflow-tooltip label="状态">
					<template slot-scope="scope">
						<el-tag :type="scope.row.level" effect="dark" size="small">{{scope.row.status}} </el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="startTime" width="300" show-overflow-tooltip label="时间">
					<template slot-scope="scope">
						<span>{{scope.row.startTime | formatDate}}</span>
						<span class="text-grey">{{scope.row.endTime | formatDate}}</span>
					</template>
				</el-table-column>

				<!-- <el-table-column width="150" label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="text" size="mini" icon="el-icon-view" @click="detail(scope.row)">历史</el-button>
						<el-dropdown size="mini" style=" margin-left: 10px;">
							<el-button type="text" size="mini">
								更多<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-if="scope.row.code === 1">
									<el-button type="text" size="mini" @click="urge(scope.row)">催办</el-button>
								</el-dropdown-item>
								<el-dropdown-item v-if="scope.row.code === 1">
									<el-button type="text" size="mini" @click="revoke(scope.row)">撤销</el-button>
								</el-dropdown-item>
								<el-dropdown-item v-if="scope.row.code === 3 || scope.row.code === 4">
									<el-button type="text" color="red" size="mini" @click="restart(scope.row)">编辑
									</el-button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column> -->
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
				layout="total, prev, pager, next">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import tableStyles from '../../utils/mixins.js'
	import pick from 'lodash.pick'
	export default {
		inject: ['reload'],
		mixins: [tableStyles],
		data() {
			return {
				searchForm: {
					beginDate: '',
					endDate: ''
				},
				searchDates: '',
				dataList: [],
				pageNo: 1,
				pageSize: 8,
				total: 0,
				loading: false,
				visible: false,
				dataListSelections: [],
				processPhotoUrl: '',
				
			}
		},
		activated() {
			this.refreshList()
		},
		methods: {
			// 获取数据列表
			refreshList() {
				this.loading = true
				this.$http({
					url: '/flowable/task/myApplyed',
					method: 'get',
					params: {
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list
						this.total = data.page.count
						this.loading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},
			trace(row) {
				this.processPhotoUrl = `${this.$http.BASE_URL}/flowable/task/trace/photo/${row.processInstanceId}`
				this.visible = true
			},
			detail(row) {
				this.$http.get('/flowable/task/getTaskDef', {
					params: {
						procInsId: row.processInstanceId,
						procDefId: row.processDefinitionId
					}
				}).then(({
					data
				}) => {
					if (data.success) {
						this.$router.push({
							path: '/flowable/task/TaskFormDetail', // dis用于实报和核定金额 历史还是办理时禁用
							query: {
								readOnly: true,
								code: row.code,
								dis: 0,
								id: this.$route.query.id,
								title: row.vars.title,
								formTitle: row.vars.title,
								...pick(data.flow, 'formType', 'formUrl', 'procDefKey', 'taskDefKey',
									'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')
							}
						})
					}
				})
			},
			// 重新填写
			restart(row) {
				this.reload();
				// 读取流程表单
				this.$http.get('/flowable/task/getTaskDef', {
					params: {
						procInsId: row.processInstanceId,
						procDefId: row.processDefinitionId
					}
				}).then(({
					data
				}) => {
					if (data.success) {
						this.$router.push({
							path: '/flowable/task/TaskFormEdit',
							query: {
								status: 'start',
								code: row.code,
								attends: 0,
								id: this.$route.query.id,
								title: row.vars.title,
								formTitle: row.vars.title,
								...pick(data.flow, 'formType', 'formUrl', 'procDefKey', 'taskDefKey',
									'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')
							}
						})
					}
				})
			},
			// 撤销申请
			revoke(row) {
				this.$confirm(`确定要撤销该流程吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('/flowable/process/revokeProcIns', {
						'id': row.processInstanceId
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg)
							this.refreshList()
						}
					})
				})
			},
			urge(row) {
				this.$refs.urgeForm.init()
			},
			resetSearch() {
				this.searchDates = ''
				this.$refs.searchForm.resetFields()
				this.$nextTick(() => {
					this.refreshList()
				})
			}
		}
	}
</script>
<style>
	p {
		margin: 0;
		padding: 0;
	}

	.text-grey {
		color: #999 !important;
	}
</style>
